<template>
  <div style="width: 50%; margin: 20px auto">
    <div style="display: flex">
      <img :src="goods.img" alt="" style="width: 50%; height: 350px; border-radius: 5px">
      <div style="padding-left: 20px">
        <div style="margin: 20px 0; font-size: 22px; font-weight: bold">{{ goods.name }}</div>
        <div style="margin: 50px 0">{{ goods.descr }}</div>
        <div style="margin: 30px 0; color: red; font-size: 22px">￥{{ goods.price }} / {{ goods.unit }}</div>
        <div style="margin: 20px 0">
          <span style="color: #666">发货地：<span style="color: #333">{{ goods.address }}</span></span>
          <span style="margin-left: 20px; color: #666">剩余：<span style="color: #333">{{ goods.store }}</span></span>
        </div>
        <div style="margin: 20px 0">
          <el-input-number :min="1" :max="10" v-model="form.num"></el-input-number>
          <el-button type="primary" style="background-color: #f59300; border-color: #f59300; margin-left: 10px" >立即购买</el-button>
        </div>
      </div>
    </div>

    <div style="margin: 50px 0">
      <div style="margin-bottom: 20px; font-size: 22px; font-weight: bold; text-align: center">商品详情</div>
      <div class="w-e-text">
        <div v-html="goods.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsDetail",
  data() {
    return {
      id: this.$route.query.id,
      goods: {},
      form: { num: 1 }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.$request.get('/goods/selectById/' + this.id).then(res => {
        this.goods = res.data || {}
      })
    }
  }
}
</script>

<style scoped>

</style>